<template>
  <div>
      <div class="crumbs">
          <el-breadcrumb separator="/">
              <el-breadcrumb-item>
                  <i class="el-icon-lx-cascades"></i> 库存查询
              </el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div class="container">
          <div class="handle-box">
              <el-select v-model="queryInfo.wid" placeholder="仓库号" class="handle-select mr10">
                  <el-option key="1" label="仓库1" value="1"></el-option>
                  <el-option key="2" label="仓库2" value="2"></el-option>
                  <el-option key="3" label="仓库3" value="3"></el-option>
                  <el-option key="4" label="仓库4" value="4"></el-option>
                  <el-option key="5" label="仓库5" value="5"></el-option>
              </el-select>
              <el-input v-model="queryInfo.gcategory" placeholder="货品种类" class="handle-select mr10">
              </el-input>
              <el-input v-model="queryInfo.gid" placeholder="货品编号" class="handle-select mr10">
              </el-input>
              <el-input v-model="queryInfo.gname" placeholder="货品名称" class="handle-select mr10">
              </el-input>
              <el-input v-model="queryInfo.gmodel" placeholder="规格型号" class="handle-select mr10">  
              </el-input>
              <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          </div>

          <el-table :data="pb.list" border class="table" ref="multipleTable" header-cell-class-name="table-header">
            
      
              <el-table-column fixed prop="wid" label="仓库" width="100" align="center"></el-table-column>
              <el-table-column fixed prop="gid" label="货品编号" width="100" align="center"></el-table-column>
              <el-table-column fixed prop="gcategory" label="货品种类" width="200" align="center"></el-table-column>
              <el-table-column fixed prop="gname" label="货品名称" width="200" align="center"></el-table-column>
              <el-table-column fixed prop="gmodel" label="规格型号" width="200" align="center"></el-table-column>
              <el-table-column fixed prop="dnumber" label="库存数" width="200" align="center"></el-table-column>

              <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button type="primary" style="margin-left: 16px" @click='find(scope.row)'>详情</el-button>
      </template>
    </el-table-column>

          </el-table>
          <div class="pagination">
              <el-pagination background layout="total, prev, pager, next" :current-page="pb.currentPage"
                  :page-size="pb.pageSize" :total="pb.totalCount" @current-change="handlePageChange"></el-pagination>
          </div>
      </div>
      <el-drawer v-model="drawer" title="I am the title" :with-header="false">
    
        <el-form :model="form" label-width="120px">
        <el-form-item label="仓库"><el-input v-model="form.gname" disabled="true">
        </el-input> 
        </el-form-item>
        <el-form-item label="货品编码"><el-input v-model="form.gid" disabled="true">
        </el-input> 
        </el-form-item>
        <el-form-item label="货品种类"><el-input v-model="form.gcategory" disabled="true">
        </el-input> 
        </el-form-item>
        <el-form-item label="规格型号"><el-input v-model="form.gmodel" disabled="true">
        </el-input> 
        </el-form-item>
        <el-form-item label="库存数"><el-input v-model="form.dnumber" disabled="true">
        </el-input> 
        </el-form-item>
</el-form>
    </el-drawer>
  </div>
</template>

<script>
import { ref, reactive,onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";



export default {
  name: "basetable",
  setup() {

      const queryInfo = ref({
          wid: '',
          gid:'',
          gcategory:'',
          gmodel: '',
          gname: '',
          currentPage: 1,
          pageSize: 6,
      })

      let pb = ref({
          currentPage: 1,
          pageSize: 6,
          list: [],
          totalPage: 0,
          totalCount: 0,
      })

      // 发起一个post请求
      axios({
          method: 'post',
          url: 'http://localhost:8080/api/warehousingPageBeanServlet',
          data: queryInfo.value
      }).then(function (resp) {

          pb.value = resp.data.data

          console.log(pb.value)
          console.log(resp.data.data)
      });

      
      const form = ref({
        gname:'',
        gid:'',
        gcategory:'',
        gmodel:'',
        dnumber:''
      })

      const drawer = ref(false)
      
      const find=(row)=>{
        drawer.value = true
        form.value=row
        console.log("row==="+row)
      }
      const search = () => {

          axios({
              method: 'post',
              url: 'http://localhost:8080/api/warehousingPageBeanServlet',
              data: queryInfo.value
          }).then(function (resp) {
              pb.value = resp.data.data
              console.log(pb.value)
              console.log(resp.data.data)


          });
      }
      

      //跳转分页
      const handlePageChange = (val) => {
        queryInfo.currentPage=val;
          axios({
              method: 'post',
              url: 'http://localhost:8080/api/warehousingPageBeanServlet',
              data:
              {
                  currentPage: val,
                  pageSize:6,
              }
          }).then(function (resp) {
              pb.value = resp.data.data
              console.log(pb.value)
          });
      }
      return {
          form,
          drawer,
          queryInfo,
          pb,
          search,
          handlePageChange,
          find
      };
  }

};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 180px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}


</style>
